<template>
  <div class="supplierProfile">
    <a-card class="general-card" title="供应商查询">
      <formButtonGroup v-model:columns="columns" :size="size" :config="config" @tap-new="tapNew" />
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data="data"
        :bordered="false"
        :size="size"
        @page-change="onPageChange"
      >
        <template #option>
          <a-button type="primary" size="small" @click="opArticleNumber"> 启动账号 </a-button>
          <a-button type="primary" size="small" @click="opArticleNumber"> 禁用账号 </a-button>
          <a-button type="primary" size="small" @click="opArticleNumber"> 修改密码 </a-button>
        </template>
      </a-table>
    </a-card>
  </div>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> Title </template>
    <div>
      <a-form ref="formRef" @submit="handleSubmit">
        <a-form-item
          label="账号"
          :rules="[
            { required: true, message: 'name is required' },
            { minLength: 5, message: 'must be greater than 5 characters' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input placeholder="please enter your username..." />
        </a-form-item>
        <a-form-item
          label="密码"
          :rules="[
            { required: true, message: 'name is required' },
            { minLength: 5, message: 'must be greater than 5 characters' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input placeholder="please enter your username..." />
        </a-form-item>
        <a-form-item label="昵称" :validate-trigger="['change', 'input']">
          <a-input placeholder="please enter your username..." />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './numberConfiguration';
// import searchBar from '@com/searchBar/searchBar.vue';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
export default {
  components: {
    // searchBar,
    formButtonGroup,
  },
  setup() {
    const { base, data, tapNew } = importConfig();
    return {
      ...toRefs(base),
      data,
      tapNew,
    };
  },
};
</script>

<style scoped lang="less">
.supplierProfile {
  // :deep(.arco-table-th) {
  //   &:last-child {
  //     .arco-table-th-item-title {
  //       margin-left: 16px;
  //     }
  //   }
  // }
  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }
  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }
  .setting {
    display: flex;
    align-items: center;
    width: 200px;
    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
}
</style>
